<template>
  <div class="page">
    <n-space>
      <n-button
        @click="
          () => {
            useType = useType === '编辑' ? '查看' : '编辑'
            ;(formList[5].componentProps as UploadProps).showTrigger =
              useType === '编辑' ? true : false
          }
        "
        >切换</n-button
      >
    </n-space>
    <!-- 当表单内含有tinymce富文本组件时,且在相同页面进行查看和编辑的切换,请给BasicForm绑定key -->
    <BasicForm
      :key="useType"
      :use-type="useType"
      :form-list="formList"
      :form-instance-props="formInstanceProps"
      :grid-props="gridProps"
      :prop-form-data="formData"
      @update-form-data="updateFormData"
      @validate-pass="submit"
    ></BasicForm>
  </div>
</template>

<script setup lang="ts">
import { FormProps, GridProps, UploadProps } from 'naive-ui'
import { PropsForm, UseType } from '../../components/basicForm/types'

const useType = ref<UseType>('新增')

// 表单项
const formList = computed(() => {
  return [
    {
      label: '企业名称',
      key: 'company_name',
      component: 'NInput',
      span: 12,
      required: true,
      originProps: {
        labelPlacement: 'left' // formItem/formItemGi的原生属性可以在这里设置
      }
    },
    {
      label: '企业类型111111',
      key: 'company_type',
      span: 12,
      component: 'NSelect',
      required: true,
      hidden: false,
      componentProps: {
        options: [
          // NSelect的原生属性可以在这里设置
          {
            label: '选项11',
            value: '选项11'
          }
        ],
        'onUpdate:value': (val: string) => {
          console.log(val, 'val')
          // 在此可做其他项依赖此项值变化的操作
        }
      }
    },
    {
      label: '企业类型222222222',
      key: 'company_type2',
      component: 'NSelect'
    },
    {
      label: '企业类型22244444',
      key: 'fdsfds',
      component: 'NCheckboxGroup',
      componentProps: {
        max: 1 // NCheckboxGroup的原生属性可以在这里设置
      },
      checkBoxOptions: [
        {
          label: '苹果',
          value: 'apple',
          disabled: true // checkBox的原生属性可以在这里设置
        },
        {
          label: '香蕉',
          value: 'banana'
        }
      ],
      transferValue: (value) => {
        return value.join(',')
      }
    },
    {
      label: '企业类型3333',
      key: 'hhhh2',
      component: 'NRadioGroup',
      componentProps: {
        max: 1 // NRadioGroup的原生属性可以在这里设置
      },
      // radioType: 'NRadioButton',
      radioOptions: [
        {
          label: '苹果',
          value: 'apple',
          disabled: true // radio的原生属性可以在这里设置
        },
        {
          label: '香蕉',
          value: 'banana'
        }
      ]
    },
    {
      label: '图片',
      key: 'photo',
      component: 'NUpload',
      isShowProcess: true,
      span: 20,
      required: false,
      componentProps: {
        accept: '.pdf,.png,.docx',
        max: 2,
        size: 5,
        listType: 'text',
        showDownloadButton: true,
        directoryDnd: true,
        multiple: true,
        showTrigger: true // 当为查看模式的时候，此处设置为false
      }
    },
    {
      label: '日期',
      key: 'date',
      component: 'NDatePicker',
      span: 24,
      required: false,
      componentProps: {
        valueFormat: 'yyyy-MM-dd'
        // valueFormat: 'yyyy.MM.dd HH:mm:ss'
      }
    },
    {
      label: '时间',
      key: 'time',
      component: 'NTimePicker',
      span: 24,
      required: true,
      componentProps: {
        valueFormat: 'HH:mm:ss'
      }
    },
    {
      label: '评价',
      key: 'pj',
      component: 'NRate',
      span: 24,
      required: true,
      componentProps: {}
    },
    {
      label: '评价22',
      key: 'pj2',
      component: 'NSlider',
      span: 12,
      required: true,
      componentProps: {}
    },
    {
      label: '开关',
      key: 'sgf',
      component: 'NSwitch',
      span: 12,
      required: true,
      componentProps: {},
      transferValue: (value) => {
        console.log(value)
        if (value) return '是'
        return '否'
      }
    },
    {
      label: '正文',
      key: 'content',
      component: 'Editor',
      componentProps: {
        inline: false,
        init: {
          height: 600
        }
      }
    }
  ] as PropsForm
})

// form标签原生属性
const formInstanceProps: FormProps = {
  labelPlacement: 'left',
  labelAlign: 'right',
  labelWidth: 130,
  showRequireMark: false
}

// grid布局标签原生属性
const gridProps: GridProps = {
  xGap: 12
}

const formData = ref<any>({
  company_name: 'xxx企业的烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦',
  company_type: '选项11',
  company_type2:
    '2233333333333333333333333333333333333333333333333333333333333333333333333333333333333333333',
  fdsfds: ['banana'],
  hhhh2: 'apple',
  photo: [
    {
      id: '1693389049291',
      name: '员工自购电脑补贴协议.pdf',
      status: 'finished',
      percentage: 100,
      url: 'https://bstig-oss.aihuoshi.net/bhzs/2023_08_30/17_50_51/%E5%91%98%E5%B7%A5%E8%87%AA%E8%B4%AD%E7%94%B5%E8%84%91%E8%A1%A5%E8%B4%B4%E5%8D%8F%E8%AE%AE.pdf'
    }
  ],
  date: '2023-09-04',
  time: '01:01:16',
  pj: 2,
  pj2: 80,
  sgf: true,
  content:
    '<p><img src="https://isp-prod.oss-cn-hangzhou.aliyuncs.com/2023_09_14/13_41_35/red-light.png" alt="" width="40" height="40">这是一张图片</p>'
})

function updateFormData(val: any) {
  formData.value = val
}

function submit() {
  // 验证通过，可以提交数据了
}

// 表单项有逻辑关系例如某一项的值或选项依赖另一项变化
// 1.可在此修改formData， formList， 没有可以去除, 以下为示例
// 2.直接在formList中的componentProps属性里编辑值更新回调函数修改
watch(
  () => formData.value.company_type,
  (val: any) => {
    console.log(val)
    if (val) {
      formList.value[2].hidden = true
      formData.value.company_name = null
    }
  },
  { deep: true }
)
</script>

<style lang="less" scoped>
.page {
  width: 1200px;
  margin: auto;
}
</style>
